<template>
	<el-card>
		<div v-if="key == this.routePath.defaultPath">
			<!-- 搜索 -->
			<el-form :inline="true" :model="searchForm">
				<el-form-item label="订单编号">
					<el-input placeholder="订单编号" v-model="searchForm.orderCode"></el-input>
				</el-form-item>
				<el-form-item label="订单类别">
					<el-select v-model="searchForm.orderType" class="input-width" placeholder="全部" clearable>
						<el-option v-for="item in orderTypeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单状态">
					<el-input placeholder="订单状态" v-model="searchForm.orderStatus"></el-input>
				</el-form-item>
				<el-form-item label="用户编号">
					<el-input placeholder="用户编号" v-model="searchForm.userCode"></el-input>
				</el-form-item>
				<el-form-item label="物流单号">
					<el-input placeholder="物流单号" v-model="searchForm.expressNo"></el-input>
				</el-form-item>
				<el-form-item label="支付方式">
					<el-select v-model="searchForm.payType" class="input-width" placeholder="全部" clearable>
						<el-option v-for="item in payTypeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单来源">
					<el-select v-model="searchForm.orderSourceType" class="input-width" placeholder="全部" clearable>
						<el-option v-for="item in orderSourceTypeOptions"
							:key="item.value"
							:label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item>
					<el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
					<el-button class="filter-item" v-if="permission_add" type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
				</el-form-item>
			</el-form>
			<!-- 列表 -->
			<el-table :data="dataList" height="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
				<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
				<el-table-column label="订单编号" prop="orderCode" align="center" width="120px"></el-table-column>
				<el-table-column label="用户编号" prop="userCode" align="center" width="120px"></el-table-column>
				<el-table-column label="订单类别" prop="orderType" align="center" width="120px">
					<template slot-scope="scope">
						<span v-if="scope.row.orderType == 'normal'">普通订单</span>
						<span v-if="scope.row.orderType == 'assemble'">拼团订单</span>
						<span v-if="scope.row.orderType == 'seckill'">秒杀订单</span>
					</template>
				</el-table-column>
				<el-table-column label="创建时间" prop="createTime" align="center" width="120px"></el-table-column>
				<el-table-column label="订单状态" prop="orderStatus" align="center" width="120px"></el-table-column>
				<el-table-column label="订单总金额" prop="orderTotalPrice" align="center" width="120px"></el-table-column>
				<el-table-column label="支付方式" prop="payType" align="center" width="120px"></el-table-column>
				<el-table-column label="订单来源"  prop="orderSourceType" align="center" width="120px"></el-table-column>
				<el-table-column label="物流名称" prop="expressName" align="center" width="120px"></el-table-column>
				<el-table-column label="物流单号" prop="expressNo" align="center" width="120px"></el-table-column>
				<el-table-column label="操作" align="center" width="150" fixed="right">
					<template slot-scope="scope">
						<el-button v-if="permission_view" type="text" size="small" @click="handleView(scope.row.id)">查看</el-button>
						<el-button v-if="permission_edit" type="text" size="small" @click="handleEdit(scope.row.id)">修改</el-button>
						<el-button v-if="permission_delete" type="text" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div v-show="!loading" class="pagination-container">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageForm.pageNum"
					:page-sizes="pageForm.pageSizeSelect" :page-size="pageForm.pageSize" :total="pageForm.totalData" layout="total, sizes, prev, pager, next, jumper"
					:prev-text="pageForm.prevText" :next-text="pageForm.nextText">
				</el-pagination>
			</div>
		</div>
		<div v-else>
			<router-view :key="key"></router-view>
		</div>
	</el-card>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { findOrderList } from '@/api/oms/order'
	export default {
		name: 'order',
		data() {
			return {
				// 默认加载弹出层
				loading: true,
				//路由地址
				routePath: {
					defaultPath: '/order/trade',
					addPath: '/base/order/add',
					editPath: '/base/order/edit',
					viewPath: '/base/order/view'
				},
				// 数据列表el-table
				dataList: [],
				// 权限按钮控制
				permission_add: false,
				permission_edit: false,
				permission_delete: false,
				permission_view: false,
				// 搜索条件
				searchForm: {
					id: '',
					orderCode: '',
					orderType: '',
					createTime: '',
					finishTime: '',
					payTime: '',
					deliveryTime: '',
					closeTime: '',
					orderStatus: '',
					orderRemark: '',
					orderGoodsTotalNumber: '',
					orderPostage: '',
					orderTotalPrice: '',
					orderTotalDiscountPrice: '',
					payType: '',
					orderSourceType: '',
					userCode: '',
					closeDesc: '',
					returnPayNo: '',
					orderEffectiveStatus: '',
					receiverName: '',
					receiverPhone: '',
					provinceName: '',
					cityName: '',
					areaName: '',
					orderAddress: '',
					orderActualPrice: '',
					extractionType: '',
					updateTime: '',
					expressName: '',
					expressNo: '',
					commentStatus: '',
					includingGlasses: '',
					userEyesDetail: '',
					pageNum: 1,
					pageSize: 10
				},
				//分页相关
				pageForm: {
					pageSizeSelect: [10, 20, 30, 50], //每页显示个数选择器的选项设置
					totalData: 0, //总条数
					pageSize: 10, //每页显示条目个数
					pageNum: 1, //当前页
					prevText: '上一页', //替代图标显示的上一页文字
					nextText: '下一页' //替代图标显示的下一页文字
				},
				payTypeOptions: [
					{
						label: '支付宝',
						value: 1
					},
					{
						label: '微信',
						value: 2
					},
					{
						label: '银联',
						value: 3
					},
					{
						label: '余额',
						value: 4
					},
				],
				orderSourceTypeOptions:[
					{
						label: '网页',
						value: 'pc'
					},
					{
						label: '安卓',
						value: 'android'
					},
					{
						label: '苹果',
						value: 'ios'
					},
					{
						label: 'M站',
						value: 'm'
					},
					{
						label: '小程序',
						value: 'small'
					},
					{
						label: '安卓平板',
						value: 'android_ipad'
					},
					{
						label: '苹果平板',
						value: 'ios_ipad'
					}
				],
				orderTypeOptions:[
					{
						label: '普通订单',
						value: 'normal'
					},
					{
						label: '拼团订单',
						value: 'assemble'
					},
					{
						label: '秒杀订单',
						value: 'seckill'
					}
				]
			}
		},
		computed: {
			key() {
				return this.$route.path
			},
			...mapGetters([
				'elementList'
			])
		},
		components: {},
		created() {
			if (this.$route.path === this.routePath.defaultPath) {
				// 初始化获取数据列表
				this.getDateList()
				//初始化按钮权限
				this.permission_add = this.elementList['base:order:add']
				this.permission_edit = this.elementList['base:order:edit']
				this.permission_delete = this.elementList['base:order:delete']
				this.permission_view = this.elementList['base:order:detail']
			}
		},
		methods: {
			// 方法集合
			getDateList() {
				this.loading = true
				findOrderList(this.searchForm).then(res => {
					console.log("请求成功打印日志", res)
					this.dataList = res.data.responseData
					this.pageForm.totalData = parseInt(res.data.total)
				})
				this.loading = false
			},
			handleView(val) {
				this.$router.push({
					path: "this.routePath.viewPath",
					query: {
						id: val
					}
				});
			},
			handleEdit(val) {
				this.$router.push({
					path: "this.routePath.editPath",
					query: {
						id: val
					}
				});
			},
			handleDelete() {

			},
			handleCreate() {
				this.$router.push({
					path: "this.routePath.addPath"
				});
			},
			handleSearch() {

			},
			handleSizeChange(val) {
				this.searchForm.pageSize = val
				this.getDateList()
			},
			handleCurrentChange(val) {
				this.searchForm.pageNum = val
				this.getDateList()
			}

		}
	}
</script>
<style>
	.el-input--suffix .el-input__inner {
		padding-right: 15px;
	}
</style>
